<template>
  <div style="width: 100%;text-align: initial;line-height: 0px;background-color: white;height: 100%;padding: 0px;position: relative">
    <div style="width: 60%;margin-left: 20%;margin-top: 40px;position: absolute">
      <p style="text-align: center;margin-bottom: 20px">请填写项目不同阶段的时间和任务</p>
      <el-steps :active="active" finish-status="success">
        <el-step title="第一阶段"></el-step>
        <el-step title="第二阶段"></el-step>
        <el-step title="第三阶段"></el-step>
      </el-steps>
      <div style="width: 400px;height: 400px;margin-left:30%;line-height: 0px" v-if="active===1" >
          <div style="width: 400px;height: 400px;background-color: rgba(0,0,0,0.45);text-align: center;border-radius: 10px">
            <p style="font-size: 28px;font-family: '楷体';padding-top: 20px">第一阶段</p>
            <hr style="width: 90%;height: 0.01px"/>
            <div style="margin-top: 20px">
              <div style="margin-top: 40px;text-align: left">
                <div>
                 截止日期：  <el-input  type="date" v-model="data1" placeholder="该阶段截止日期" style="width: 60%;margin-top: 30px"></el-input>
                </div>
                <div>
                  阶段任务：   <el-input style="width: 60%;margin-top: 30px" type="textarea" :rows="2" placeholder="该阶段任务" v-model="textarea1"></el-input>
                </div>
              </div>
            </div>
          </div>
      </div>
      <div style="width: 400px;height: 400px;margin-left:30%" v-if="active===2"  >
        <div style="width: 400px;height: 400px;background-color: rgba(0,0,0,0.45);text-align: center;border-radius: 10px">
          <p style="font-size: 28px;font-family: '楷体';padding-top: 20px">第二阶段</p>
          <hr style="width: 90%;height: 0.01px"/>
          <div style="margin-top: 20px">
            <div style="margin-top: 40px;text-align: left">
              <div>
                截止日期：  <el-input  type="date" v-model="data2" placeholder="该阶段截止日期" style="width: 60%;margin-top: 30px"></el-input>
              </div>
              <div>

                阶段任务：   <el-input style="width: 60%;margin-top: 30px" type="textarea" :rows="2" placeholder="该阶段任务" v-model="textarea2"></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 400px;height: 400px;margin-left:30%" v-if="active===3" >
        <div style="width: 400px;height: 400px;background-color: rgba(0,0,0,0.45);text-align: center;border-radius: 10px">
          <p style="font-size: 28px;font-family: '楷体';padding-top: 20px">第三阶段</p>
          <hr style="width: 90%;height: 0.01px"/>
          <div style="margin-top: 20px">
            <div style="margin-top: 40px;text-align: left">
              <div>
                截止日期：  <el-input  type="date" v-model="data3" placeholder="该阶段截止日期" style="width: 60%;margin-top: 30px"></el-input>
              </div>
              <div>

                阶段任务：   <el-input style="width: 60%;margin-top: 30px" type="textarea" :rows="2" placeholder="该阶段任务" v-model="textarea3"></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-left: 45%">
        <el-button style="margin-top: 12px;" @click="nextt" v-if="active==3||active==2">上一步</el-button>
        <el-button style="margin-top: 12px" @click="next" v-if="active==1||active==2">下一步</el-button>
        <el-button style="margin-top: 12px" @click="dom" v-if="active==3">提交</el-button>
      </div>

    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        gid:'',
        active: 1,
        data1:'',
        textarea1:'',
        data2:'',
        textarea2:'',
        data3:'',
        textarea3:'',
      };
    },

    mounted: function () {
      this.gid= this.$route.query.mallCode

    },
    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      },
      nextt() {
        --this.active;
        if (this.active<0) this.active = 0;
      },
      dom(){
          axios.post('/company/insertStep',{
            oid :this.gid,
            data1:this.data1,
            task1:this.task1,
            data2:this.data2,
            task2:this.task2,
            data3:this.data3,
            task3:this.task3,
          }).then((response) => {
            if(response.data.states=800){
              this.$notify({
                title: '成功',
                message: '注册成功',
                type: 'success',
                duration:1000
              });
              this.$router.replace('/ProjectManageing')
            }else{
              this.$notify.error({
                title: '错误',
                message: response.data.message,
                type: 'warning',
                duration:0
              });
            }
          }).catch((response)=>{

          })




        console.log(this.gid)
        console.log(this.data1)
        console.log(this.textarea1)
        console.log(this.data2)
        console.log(this.textarea2)
        console.log(this.data3)
        console.log(this.textarea3)

      }




    }
  }
</script>
